import React, { useEffect } from 'react';
import { Calendar, theme,Badge } from 'antd';
import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
import type { Dayjs } from 'dayjs';
import './Agenda.scss'
import type { BadgeProps } from 'antd';
import * as echarts from 'echarts';




const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
    console.log(value.format('YYYY-MM-DD'), mode);
};




const getListData = (value: Dayjs) => {

    let listData;
    switch (value.date()) {
      case 8:
        listData = [
          { type: 'warning', content: 'This is warning event.' },
          { type: 'success', content: 'This is usual event.' },
        ];
        break;
      case 10:
        listData = [
          { type: 'warning', content: 'This is warning event.' },
          { type: 'success', content: 'This is usual event.' },
          { type: 'error', content: 'This is error event.' },
        ];
        break;
      case 15:
        listData = [
          { type: 'warning', content: 'This is warning event' },
          { type: 'success', content: 'This is very long usual event。。....' },
          { type: 'error', content: 'This is error event 1.' },
          { type: 'error', content: 'This is error event 2.' },
          { type: 'error', content: 'This is error event 3.' },
          { type: 'error', content: 'This is error event 4.' },
        ];
        break;
      default:
    }
    return listData || [];
  };
  
  const getMonthData = (value: Dayjs) => {
    if (value.month() === 8) {
      return 1394;
    }
  };
interface Props {

}
function Agenda(props: Props) {
  var myChart:any = null;
  useEffect(() => {
    myChart = echarts.init(document.getElementById('hh1')||document.body )
    draw()
}, [])
var draw = ()=>{
  myChart.setOption({
    legend: {},
    tooltip: {},
    dataset: {
      dimensions: ['product', '2015', '2016', '2017'],
      source: [
        { product: '产品部', '2015': 43.3, '2016': 85.8, '2017': 93.7 },
        { product: '研发部', '2015': 83.1, '2016': 73.4, '2017': 55.1 },
        { product: '质检部', '2015': 86.4, '2016': 65.2, '2017': 82.5 },
        { product: '财务部', '2015': 72.4, '2016': 53.9, '2017': 39.1 }
      ]
    },
    xAxis: { type: 'category' },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
  })
 
}
    const { token } = theme.useToken();

    const wrapperStyle: React.CSSProperties = {
        width: 300,
        border: `1px solid ${token.colorBorderSecondary}`,
        borderRadius: token.borderRadiusLG,
    };



    const monthCellRender = (value: Dayjs) => {
        const num = getMonthData(value);
        return num ? (
          <div className="notes-month">
            <section>{num}</section>
            <span>Backlog number</span>
          </div>
        ) : null;
      };
    
      const dateCellRender = (value: Dayjs) => {
        const listData = getListData(value);
        return (
          <ul className="events">
            {listData.map((item) => (
              <li key={item.content}>
                <Badge status={item.type as BadgeProps['status']} text={item.content} />
              </li>
            ))}
          </ul>
        );
      };
    return (
        <div className='agenda'>
            <div className='h1'>日程待办</div>
           <div style={{display:'flex'}}>
           <div style={wrapperStyle}>
                <Calendar fullscreen={false} onPanelChange={onPanelChange} />
            </div>
            <div id='hh1' style={{width:800,height:350}}></div> 
           </div>
            <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender}  style={{marginTop:10}}/>;
        </div>
    );
}

export default Agenda;